<template>
    <div>
      <el-form :inline="true" :model="MedicalCard" class="demo-form-inline">
        <el-input style="width: 300px" prefix-icon="el-icon-search" placeholder="请输入就诊卡号" v-model="MedicalCard.id"></el-input>
        <el-form-item>
          <el-button type="primary" @click="getRecordByMid">查询</el-button>
        </el-form-item><br>
      </el-form>

      <el-table
          :data="registration"
          stripe
          style="width: 100%">
        <el-table-column
            prop="id"
            label="挂号id"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="left"
            prop="mid"
            label="就诊卡号"
            width="150">
        </el-table-column>
        <el-table-column
            fixed="left"
            prop="medicalCard.name"
            label="患者"
            width="150">
        </el-table-column>
        <el-table-column
            prop="user.name"
            label="医生"
            width="150">
        </el-table-column>
        <el-table-column
            prop="user.department.name"
            label="科室"
            width="200">
        </el-table-column>
        <el-table-column
            prop="user.department.address"
            label="就诊地点"
            width="300">
        </el-table-column>
        <el-table-column
            prop="registeredTime"
            label="挂号时间"
            width="300">
        </el-table-column>
        <el-table-column prop="payStatus" label="缴费状态" width="120" fixed="right">
          <template #default="scope">
            <el-tag v-if="scope.row.payStatus" type="success">已缴费</el-tag>
            <el-tag v-else type="danger">未缴费</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="就诊状态" width="120" fixed="right">
          <template #default="scope">
            <el-tag v-if="scope.row.enabled" type="success">已就诊</el-tag>
            <el-tag v-else type="danger">未就诊</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="150">
          <template slot-scope="scope">
            <el-button type="danger" size="small" class="el-button--danger" @click="handleDelete(scope.$index, scope.row)">退号</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import {Message} from "element-ui";
import {getRequest} from "../../utils/api";

export default {
  name: "RegisterRecord",
  data(){
    return{
      registration:[],
      MedicalCard:{
        id:''
      }
    }
  },
  mounted() {
    this.initRecords()
  },
  methods:{
    //根据卡号获取挂号记录
    getRecordByMid(){
      this.getRequest("/registration/getRecordByMid?mid="+this.MedicalCard.id).then(resp=>{
        if(resp){
          this.registration=resp;
        }else{
          Message.error("暂无该患者的挂号记录")
        }
      })
    },
    //获取所有挂号记录
    initRecords(){
      getRequest("/registration/getAllRecords").then(resp=>{
        if(resp){
          this.registration=resp;
        }
      })

    },
    //退号
    handleDelete(index,data) {
      this.$confirm('是否继续进行退号操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.getRequest("/registration/backRegistration/"+data.id).then(resp=>{
          if(resp){
            this.initRecords();
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退号'
        });
      });
    },
  }
}
</script>

<style scoped>

</style>